<template>
  <BasicDrawer
    v-bind="$attrs"
    :isDetail="true"
    :showDetailBack="false"
    @register="registerDrawer"
    width="70%"
  >
    <div>
      <Tabs :animated="true">
        <TabPane key="detail" tab="详情">
          <Description @register="registerDescripton" />
        </TabPane>
      </Tabs>
    </div>
  </BasicDrawer>
</template>
<script setup lang="ts">
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { Description } from '/@/components/Description/index';
  import { useDescription } from '/@/components/Description';
  import { localPacketDetailSchema, URLDetailSchema } from './otaDrawer.data';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { otaPackageInfo } from '/@/api/thingsborad/advanced/OTA/OTA';
  import { getDeviceProfileInfo } from '/@/api/thingsborad/entity/entity';

  const [registerDescripton, { setDescProps }] = useDescription();
  const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
    const response = await otaPackageInfo(data.otaPackageId);
    const deviceProfileInfo = await getDeviceProfileInfo(response.deviceProfileId.id);
    if (Boolean(response.url)) {
      setDescProps({
        schema: URLDetailSchema,
        data: {
          createdTime: response.createdTime,
          title: response.title,
          version: response.version,
          versionLabel: response.tag,
          deviceConfiguration: deviceProfileInfo.name,
          packetType: response.type,
          URL: response.url,
          remark: response.additionalInfo.description,
        },
        layout: 'vertical',
        size: 'small',
        column: 2,
        bordered: false,
        labelStyle: {
          fontWeight: 400,
          fontSize: '14px',
          marginTop: '20px',
          color: 'rgba(0, 0, 0, 0.45)',
        },
        contentStyle: {
          fontWeight: 400,
          fontSize: '14px',
          color: 'rgba(0, 0, 0, 0.85)',
        },
      });
    } else {
      setDescProps({
        schema: localPacketDetailSchema,
        data: {
          createdTime: response.createdTime,
          title: response.title,
          version: response.version,
          versionLabel: response.tag,
          deviceConfiguration: deviceProfileInfo.name,
          packetType: response.type,
          algorithm: response.checksumAlgorithm,
          checkSum: response.checksum,
          fileName: response.fileName,
          fileSize: response.dataSize,
          contentType: response.contentType,
          remark: response.additionalInfo.description,
        },
        layout: 'vertical',
        size: 'small',
        column: 2,
        bordered: false,
        labelStyle: {
          fontWeight: 400,
          fontSize: '14px',
          marginTop: '20px',
          color: 'rgba(0, 0, 0, 0.45)',
        },
        contentStyle: {
          fontWeight: 400,
          fontSize: '14px',
          color: 'rgba(0, 0, 0, 0.85)',
        },
      });
    }

    setDrawerProps({
      title: response.title,
      headerStyle: {
        'padding-left': '12px',
      },
    });
  });
</script>
<style lang="less" scoped>
  :deep(.ant-tabs-nav) {
    margin: 0;
  }
</style>
